import React from 'react'
import Info from 'components/info'
import { Badge, Button, Switch } from "antd";

export default {
  key: 'info',
  name: 'Info 头信息',
  author: '张然',
  description: '用于展示固定数据。',
  isExampleFull: true,
  api: [{
    title: 'API',
    data: [{
      param: 'title', description: '组件标题。', type: 'string|ReactNode', defaultValue: '-'
    }, {
      param: 'dataSource', description: '数据对象。', type: 'object', defaultValue: '-'
    }, {
      param: 'attributes', description: '每一项列的配置描述，具体项见下表。', type: 'AttributeProps[]', defaultValue: '-'
    }, {
      param: 'loading', description: '是否显示加载状态。', type: 'bool', defaultValue: '-'
    }],
    description: ''
  }, {
    title: 'AttributeProps',
    data: [{
      param: 'title', description: '标题。', type: 'string|ReactNode', defaultValue: '-'
    }, {
      param: 'dataIndex', description: '列数据在数据项中对应的::key::，支持::a.b.c::的嵌套写法。', type: 'string', defaultValue: '-'
    }, {
      param: 'render', description: '生成复杂数据的渲染函数，参数分别为当前项的值，当前项数据，索引。', type: 'function(text, record, index)', defaultValue: 'text => text'
    }, {
      param: 'span', description: '每一项占位数。', type: 'number', defaultValue: '8'
    }, {
      param: 'className', description: '每一项元素的类名。', type: 'string', defaultValue: '-'
    }],
    description: '每一项的数据对象，是::attributes::中的一项。'
  }],
  example: [
    {
      title: '基础用法',
      description: '传入对象和展示字段即可。',
      state: {
        data: {
          name: '于谦',
          father: '王老爷子',
          title: '韩国王子殿下',
          enabled: false,
          story: [{
            content: '每十个北京人就有一个是于谦的父亲，听相声的都是于谦的父亲; 家中排行第八人称北京八爷，简称京八。'
          }]
        },
        loading: false
      },
      getMethod: context => {
        return {

        }
      },
      getContent: context => {
        const { data, loading } = context.state;
        const attributes = [{
          title: '姓名', dataIndex: 'name'
        }, {
          title: '父亲', dataIndex: 'father'
        }, {
          title: '身份', dataIndex: 'title'
        }, {
          title: '是否在位', dataIndex: 'enabled',
          render: enabled => <Badge
            status={enabled ? 'success' : 'error'}
            text={enabled ? '是' : '否'}
          />
        }, {
          title: '主要事迹', dataIndex: 'story.0.content',
          span: 16
        }, {
          title: '这个字段找不到', dataIndex: 'a.b'
        }];
        return (
          <div>
            <Switch onChange={context.toState({ loading: !loading })} checked={loading}/>
            &nbsp;loading
            <br/>
            <Info
              title='这是标题'
              dataSource={data}
              attributes={attributes}
              loading={loading}
            >
              <Button type='primary'>编辑</Button>
            </Info>
          </div>
        )
      }
    }
  ]
}
